import { defineComponent } from 'vue';

import TriggerBox from './TriggerBox';
import {
  Contextmenu,
  ContextmenuItem,
  ContextmenuDivider,
  ContextmenuGroup,
} from '../src';

const ExampleCustomTrigger = defineComponent({
  name: 'ExampleCustomTrigger',

  setup() {
    return () => (
      <>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            height: '100%',
          }}
        >
          <div
            v-contextmenu={[{ trigger: 'click' }, 'contextmenu']}
            style={{
              height: '100%',
            }}
          >
            <TriggerBox>
              <code>左键点击此区域</code>
            </TriggerBox>
          </div>

          <div
            v-contextmenu={[
              { trigger: ['click', 'contextmenu'] },
              'contextmenu',
            ]}
            style={{
              marginTop: '12px',
              height: '100%',
            }}
          >
            <TriggerBox>
              <code>左键或右键点击此区域</code>
            </TriggerBox>
          </div>

          <div
            v-contextmenu={[{ trigger: 'dblclick' }, 'contextmenu']}
            style={{
              marginTop: '12px',
              height: '100%',
            }}
          >
            <TriggerBox>
              <code>左键双击此区域</code>
            </TriggerBox>
          </div>
        </div>

        <Contextmenu ref="contextmenu">
          <ContextmenuItem>菜单</ContextmenuItem>

          <ContextmenuDivider />

          <ContextmenuGroup title="按钮组">
            <ContextmenuItem>菜单1</ContextmenuItem>
            <ContextmenuItem>菜单2</ContextmenuItem>
            <ContextmenuItem disabled>菜单3</ContextmenuItem>
          </ContextmenuGroup>
        </Contextmenu>
      </>
    );
  },
});

export default ExampleCustomTrigger;
